/**
 * Created by tanbingqin on 2020/10/30.
 */
import { messages, deepFullCopy } from "share/common";
import React from "react";
import { connect } from "react-redux";
import { message, Icon, Modal, Button, Row, Col, Input, Timeline, Spin, Radio, Switch } from "antd";
const TextArea = Input.TextArea;
import approveService from "containers/approve/approve.service";
import errorMessage from "share/errorMessage";
import "styles/approve/approve-return.scss";
import Condition from "components/condition";
const If = Condition.If;
import Skeleton from "components/skeleton";
import Signature from "components/template/signature";

class ApproveSignature extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      submitLoading: false,
      approvalTxt: "",
      isUseSignature: false,
      isEditSignature: false,
      signatureDTO: null,
    };
  }

  componentWillMount() {}

  componentWillReceiveProps(nextProps) {
    const { modalVisible } = this.props;
    if (!modalVisible && nextProps.modalVisible) {
      this.setState({ approvalTxt: nextProps.quickTxt, loading: true });
      approveService
        .getSignature()
        .then((res) => {
          this.setState({
            isUseSignature: true,
            signatureDTO: res.data.attachmentDTO,
            loading: false,
          });
        })
        .catch((err) => {
          this.setState({ loading: false });
          errorMessage(err.response);
        });
    }
    if (modalVisible && !nextProps.modalVisible) {
      this.setState({
        approvalTxt: "",
        isUseSignature: false,
        isEditSignature: false,
        signatureDTO: null,
      });
    }
  }

  closeModal = () => {
    const { onClose } = this.props;
    onClose();
  };

  handleApprove = () => {
    const { onSign, isReject } = this.props;
    const { approvalTxt, signatureDTO, isUseSignature } = this.state;

    if (isReject && (!approvalTxt || !approvalTxt.trim())) {
      message.error(messages("common-1.key192") /*请输入驳回意见*/);
      return;
    }

    onSign({
      approvalTxt,
      signatureAttachmentOID: isUseSignature ? signatureDTO && signatureDTO.attachmentOID : undefined,
    });
  };

  handleSaveSignature = () => {
    const { signatureDTO } = this.state;
    this.setState({ loading: true });
    approveService
      .saveSignature(signatureDTO.attachmentOID)
      .then((res) => {
        this.setState({ loading: false });
      })
      .catch((err) => {
        this.setState({ loading: false });
        errorMessage(err.response);
      });
  };

  handleChangeTxt = (value) => {
    this.setState({ approvalTxt: value });
  };

  onChangeSwitch = (value) => {
    this.setState({ isUseSignature: value });
    if (!value) {
      this.setState({ isEditSignature: false });
    }
  };

  handleChangeSignature = (value) => {
    this.setState({ signatureDTO: value, isEditSignature: false }, this.handleSaveSignature);
  };

  toggle = () => {
    this.setState({ isEditSignature: !this.state.isEditSignature });
  };

  render() {
    const { modalVisible, isReject } = this.props;
    const { loading, submitLoading, approvalTxt, isUseSignature, signatureDTO, isEditSignature } = this.state;
    return (
      <div>
        <Modal
          width={760}
          title={isReject ? messages("common-1.key1069") /*审批驳回*/ : messages("common-1.key1068") /*审批通过*/}
          visible={modalVisible}
          onCancel={() => this.closeModal(false)}
          maskClosable={false}
          destroyOnClose={true}
          footer={[
            <Button key="back" onClick={() => this.closeModal(false)}>
              {messages("common.cancel") /*取消*/}
            </Button>,
            <Button
              key="submit"
              type="primary"
              disabled={isEditSignature}
              loading={submitLoading}
              onClick={() => this.handleApprove()}
            >
              {messages("common.ok") /*确定*/}
            </Button>,
          ]}
        >
          <div style={{ maxHeight: 500, overflowY: "auto" }}>
            <Spin spinning={loading}>
              <If value={loading}>
                <Skeleton />
              </If>
              <If value={!loading}>
                <TextArea
                  maxLength="500"
                  placeholder={messages("common-1.key1364") /*请输入审批意见*/}
                  style={{ resize: "none", marginBottom: 12 }}
                  rows={4}
                  value={approvalTxt}
                  onChange={(e) => this.handleChangeTxt(e.target.value)}
                />
                <div style={{ height: 31, lineHeight: "31px", marginBottom: 12 }}>
                  {messages("common-1.key1365") /*使用签名*/}&nbsp;&nbsp;&nbsp;
                  <Switch checked={isUseSignature} onChange={this.onChangeSwitch} />
                </div>
                <If value={isUseSignature}>
                  <If value={!isEditSignature}>
                    <If value={signatureDTO && signatureDTO.fileURL}>
                      <img src={signatureDTO && signatureDTO.fileURL} style={{ maxWidth: 120, maxHeight: 64 }} />
                      <div>
                        <a onClick={this.toggle}>{messages("common-1.key1366") /*编辑签名*/}</a>
                      </div>
                    </If>
                    <If value={!signatureDTO || !signatureDTO.fileURL}>
                      <div>
                        <a onClick={this.toggle}>{messages("common-1.key1367") /*新增签名*/}</a>
                      </div>
                    </If>
                  </If>
                  <If value={isEditSignature}>
                    <Signature
                      width={712}
                      onCancel={this.toggle}
                      onChange={(attachmentDTO) => this.handleChangeSignature(attachmentDTO)}
                    />
                  </If>
                </If>
              </If>
            </Spin>
          </div>
        </Modal>
      </div>
    );
  }
}

ApproveSignature.propTypes = {
  modalVisible: React.PropTypes.bool,
  onClose: React.PropTypes.func,
  onSign: React.PropTypes.func,
  quickTxt: React.PropTypes.string, //审批意见
  isReject: React.PropTypes.bool, //是否是审批驳回
};

ApproveSignature.defaultProps = {
  modalVisible: false,
  onClose: () => {},
  onSign: () => {},
  quickTxt: "",
  isReject: false,
};

function mapStateToProps(state) {
  return {};
}

export default connect(mapStateToProps)(ApproveSignature);
